<template>
  <view class="login-cc-account-container" @touchstart.prevent>
    <!-- 自定义导航栏 -->
    <navigation-bar>
      <navigator
        style="position: absolute;top: 50%;transform: translateY(-50%);left: 20px;font-size: 16px;line-height: 16px;color: #000;"
        class="iconfont" hover-class="none" open-type="navigateBack">&#xe61a;
      </navigator>
    </navigation-bar>
    <view class="main-content-wrapper">
      <!-- 头像 -->
      <view class="avatar-panel">
        <image class="avatar-pic" src="/static/avatar.png" mode="aspectFill"></image>
      </view>
      <!-- 登录输入表单 -->
      <view class="login-input-form">
        <form name="ccaccountForm">
          <view class="account-input-box">
            <input type="text" class="account-input common-input" v-model="accountInputVal" :hold-keyboard="true"
              :adjust-position="false" placeholder="电话或者邮箱" placeholder-style="color: #000;opacity: 0.25;"
              :auto-focus="true" @input="onInputHandler('accountInputVal', $event)">
          </view>
          <view style="margin-top: 20rpx;padding-right: 60rpx;" class="password-input-box">
            <input type="text" class="password-input common-input" v-model="passwordInputVal" :hold-keyboard="true"
              :adjust-position="false" placeholder="密码" placeholder-style="color: #000;opacity: 0.25;"
              @input="onInputHandler('passwordInputVal', $event)">
            <navigator url="/subpkg/login-ccaccount/components/found-password/found-password" hover-class="none"
              class="found-password-icon iconfont">
              &#xe621;
            </navigator>
          </view>
          <view class="from-submit-btn">
            登录
          </view>
        </form>
      </view>
    </view>
  </view>
</template>

<script>
  export default {
    data() {
      return {
        accountInputVal: '',
        passwordInputVal: ''
      };
    },
    methods: {
      onInputHandler: function(inputName, {
        detail: {
          value
        }
      }) {
        this[inputName] = value
      }
    },
  }
</script>

<style lang="scss">
  .login-cc-account-container {
    min-height: 100%;

    .main-content-wrapper {
      .avatar-panel {
        padding: 80rpx 0 60rpx;
        text-align: center;

        .avatar-pic {
          width: 140rpx;
          height: 140rpx;
        }
      }

      .login-input-form {
        box-sizing: border-box;
        width: 100%;
        padding: 0 70rpx;

        .common-input {
          width: 100%;
          height: 100%;
          color: #000;
          font-size: 36rpx;
        }

        .account-input-box,
        .password-input-box {
          position: relative;
          box-sizing: border-box;
          width: 100%;
          height: 100rpx;
          padding: 28rpx 10rpx;
          border-bottom: 1rpx solid #00000080;
        }

        .found-password-icon {
          position: absolute;
          top: 28rpx;
          right: 10rpx;
          font-size: 40rpx;
          line-height: 40rpx;
          color: #00000080;
        }


        .from-submit-btn {
          width: 100%;
          height: 72rpx;
          background-color: #000;
          margin-top: 60rpx;
          border-radius: 50rpx;
          color: #FFF;
          font-size: 36rpx;
          text-align: center;
          line-height: 72rpx;
          z-index: 99;
        }
      }
    }
  }
</style>